<template>
	<div>
		<el-row>
			<!-- 左侧菜单树 -->
			<el-col :span="6" style='margin-top:15px;'>
				<el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
				<el-tree class="filter-tree"
					:check-strictly="false"
					:data="treeData" 
					node-key = "menuCode"
					show-checkbox
					highlight-current
					:props="defaultProps" 
					:filter-node-method="filterNode" 
					ref="menuTree" 
					@node-click="getNodeData" 
					>
				</el-tree>
			</el-col>
			<!-- 右侧元素列表 -->
			<el-col :span="17" style='margin-top:15px;margin-left: 10px;'>
				<!-- 列表 -->
				<el-table :data="elementList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
					<el-table-column label="元素名称" prop="elementName" align="center" ></el-table-column>
					<el-table-column label="元素类型" prop="elementType" align="center" >
						<template slot-scope="scope">
							{{scope.row.elementType == 'uri' ? '路径':'按钮'}}
						</template>
					</el-table-column>
					<el-table-column label="授权编号" prop="authCode" align="center" ></el-table-column>
					<el-table-column label="资源路径" prop="elementUri" align="center" ></el-table-column>
					<el-table-column label="方法类别" prop="elementMethod" align="center"></el-table-column>
					<el-table-column label="操作" align="center" width="110">
						<template slot-scope="scope">
							<el-button v-if="(scope.row.bindStatus == '1')" type="text" size="small" @click="handleRemoveRoleResourceElement(scope.row)">移除</el-button>
							<el-button v-if="(scope.row.bindStatus == '2')" type="text" size="small" @click="handleBindRoleResourceElement(scope.row)">绑定</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<div align="center">
			<el-button type="info" @click="back">返回</el-button>
			<el-button type="success" @click="handleBindRoleResourceMenu">保存</el-button>
		</div>
		
	</div>
</template>

<script>
import { findMenuTree } from '@/api/admin/systemMenu'
import { findRoleResourceElement,bindRoleResourceElement,removeRoleResourceElement,findRoleResourceMenu,bindRoleResourceMenu}  from '@/api/admin/systemResourceAuth'
export default{
	data(){
		return {
			loading:false,
			filterText: '',
			elementList:[],
			treeData:[], //树内容
			defaultProps: {
				children: 'children',
				label: 'menuName'
			},
			//搜索条件
			searchFrom: {
				menuCode: '0',
				roleCode:'',
			}
		}
	},
	created() {
		this.searchFrom.roleCode = this.$route.query.roleCode
		this.getTreeList(this.$route.query.roleCode)
	},
	watch: {
		filterText(val) {
			this.$refs.menuTree.filter(val);
		}
	},
	methods:{
		//获取树数据
		getTreeList(val){
			findMenuTree().then(response => {
				this.treeData = response.data.responseData
				this.initAuthoritys(val);
			})
		},
		//初始化权限
		initAuthoritys(val){
			findRoleResourceMenu(val).then(response =>{
				const result = []
				for (let i = 0; i < response.data.responseData.length; i++) {
					result.push(response.data.responseData[i])
				}
				this.$refs.menuTree.setCheckedKeys(result);
			})
		},
		//获取树节点
		getTreeNodeKey(node) {
			return node.menuCode
		},
		//过滤树节点
		filterNode(value, data) {
			console.log('要过滤的值',value)
			console.log('被过滤的',data)
			if (!value) {
				return true
			}
			return data.menuName.indexOf(value) !== -1
		},
		//获取树节点下子元素信息
		getNodeData(data) {
			this.searchFrom.menuCode = data.code
			this.getRoleResourceElement(this.searchFrom)
			this.showElement = true
		},
		//移除元素
		handleRemoveRoleResourceElement(val){
			let params = {
				roleCode: this.searchFrom.roleCode,
				elementCode: val.elementCode
			}
			removeRoleResourceElement(params).then(() => {
				this.getRoleResourceElement(this.searchFrom)
			})
		},
		//绑定元素
		handleBindRoleResourceElement(val){
			let params = {
				roleCode: this.searchFrom.roleCode,
				elementCode: val.elementCode,
				elementType: val.elementType,
				authCode: val.authCode,
				menuCode: val.menuCode
			}
			bindRoleResourceElement(params).then(() =>{
				this.getRoleResourceElement(this.searchFrom)
			})
		},
		//绑定菜单
		handleBindRoleResourceMenu(){
			//获取所有选中节点的id
			const parentArr = this.$refs.menuTree.getHalfCheckedNodes();   
			//获取子节点未全选时的父节点id
			const childArr = this.$refs.menuTree.getCheckedNodes();
			//拼接
			const nodes = parentArr.concat(childArr)
			console.log(nodes)
			const checkMenus = [];
			for (let i = 0; i < nodes.length; i++) {
				let bindMenus = {
					menuCode: nodes[i].menuCode,
					authCode: nodes[i].authCode
				}	
				checkMenus.push(bindMenus)
			}
			let params = {
				roleCode: this.searchFrom.roleCode,
				bindMenuList: checkMenus
			}
			console.log('选中的菜单',params)
			bindRoleResourceMenu(params).then(() => {
				this.$router.go(-1)
			})
		},
		//获取元素信息
		getRoleResourceElement(val){
			findRoleResourceElement(val).then(response => {
				this.elementList = response.data.responseData
			})
		},
		back(){
			this.$router.go(-1)
		}
		
	}
}
</script>

<style>
</style>
